<script setup>
import listApis from '@/apis/list.js'
const emits = defineEmits(['update:modelValue', 'confirm'])
const props = defineProps({
    appendToBody: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ""
    },
    modelValue: {
        type: Boolean,
        default: false
    },
    item: {
        type: Object,
        default: {}
    }
})
const skusData = ref([])
const computedValue = computed({
    get: () => props.modelValue,
    set: (val) => {
        emits('update:modelValue', val)
    }
})
const computedPrice = computed({
    get: () => {
        let sum = 0;
        if (skuStatusArr.value.length) {
            for (let i in skuStatusArr.value) {
                if(skuStatusArr.value[i]){
                    // sum += skusData.value[i].price * selectedSkus.value[i].num
                    sum += skusData.value[i].discountPrice
                }
               
            }
        }
        return sum/100
    },

})

const skuStatusArr = ref([]);

const skus = computed(() => {
    if (skusData.value.length) {
        let arr = []
        for (let i in skusData.value) {
            arr.push(skusData.value[i].name)
        }
        return arr;
    }
})
const selectedSkus = computed(() => {
    let arr = []
    for (let i in skuStatusArr.value) {
        if (skuStatusArr.value[i]) {
            arr.push(skusData.value[i].id)
        }
    }
    return arr;
})
const selectedSkusText = computed(() => {
    let arr = []
    for (let i in skuStatusArr.value) {
        if (skuStatusArr.value[i]) {
            arr.push(skusData.value[i].name)
        }
    }
    return arr;
})
watch(skusData, () => {
    skuStatusArr.value = new Array(skusData.value.length).fill(false)
}, {
    // once:true
})
function changeCheckTag(checked, index) {
    skuStatusArr.value[index] = checked
}
function confirm() {
    emits('update:modelValue', false)
    if (selectedSkus.value.length <= 0) return;
    emits('confirm', {
        item: props.item,
        selectedSkus: selectedSkus.value,
        computedPrice: computedPrice.value
    });

}
function opened() {
    listApis.skuList({
        params: {
            packageId: props.item.id
        }
    }).then(res => {
        const data = res.data
        skusData.value = data || []
    })
}
</script>

<template>
    <el-dialog v-model="computedValue" @opened="opened" :append-to-body="props.appendToBody" :title="props.title"
        width="60%">
        <div>
            <div class="productName">
                {{ item.name }}
            </div>
            <!-- <img src="http://localhost:5173/src/assets/images/logo3.png" :alt="item.productName" class="img"> -->
            <div class="tags margin-top-20">
                <el-tag round class="my-tag" type="success" v-for="(i, index) in item.tagNameList" :key="index">{{ i
                }}</el-tag>


            </div>
            <div class="selected margin-top-20" style="min-height: 70px;">
                <div class="title">已选科目</div>
                <el-tag effect="plain" class="my-tag" round v-for="item, index in selectedSkusText" :key="index">{{ item
                }}</el-tag>

            </div>
            <div classs="kus margin-top-20">
                <div class="title" style="margin:20px 0;">添加科目</div>
                <el-check-tag class="my-tag" round :checked="skuStatusArr[index]"
                    @change="(val) => changeCheckTag(val, index)" v-for="item, index in skus" :key="index"
                    style="margin-right: 8px">{{ item }}</el-check-tag>

            </div>

        </div>
        <template #footer>
            <span class="dialog-footer">
                <div class="left">
                    <span class="black">
                        合计：
                    </span>
                    <span class="unit">￥</span>
                    <span>
                        {{ computedPrice.toFixed(2) }}
                    </span>

                </div>
                <div class="right">
                    <el-button @click="computedValue = false">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定</el-button>
                </div>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped>
.img {
    width: 114px;
    height: 114px;
}
.my-tag{
    margin-top: 10px;
}
.my-tag+.my-tag {
    margin-left: 20px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-20 .title {
    margin: 20px 0;
}

.selected {}

.dialog-footer {
    display: flex;
    margin-top: 20px;
}

.dialog-footer .left {
    flex: 1;
    text-align: left;
    color: var(--red_n);
    font-size: 18px;
}

.dialog-footer .left .black {
    color: black;
}

.dialog-footer .left .unit {
    font-size: 12px;
}

.dialog-footer .right {
    width: 150px;
}

.productName {

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    height: 60px;

    background-image:
        url('@/assets/images/Rectangle 34625506.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

}
</style>